<template>
  <div class="cadView">
    <!-- 文字输入框 -->
    <el-dialog
      :title="$t('message.cadViewer.inputTextDialogText')"
      :visible.sync="showTextInputDialog"
      :modal-append-to-body="false"
    >
      <el-form>
        <el-form-item label>
          <el-input v-model="textInputDialogContent" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" @before-close="onTextInputDialogOkClick(false)">
        <el-button @click="onTextInputDialogOkClick(false)">{{$t('message.public.cancel')}}</el-button>
        <el-button
          type="primary"
          @click="onTextInputDialogOkClick(true)"
        >{{$t('message.public.confirm')}}</el-button>
      </div>
    </el-dialog>

    <!-- 关闭markup对话框 -->
    <el-dialog :visible.sync="showExitMarkupDialog" :modal-append-to-body="false">
      <div>
        <div>
          {{ showExitMarkupType == 1 ? $t('message.cadViewer.taggingMode.exitMarkupMode') :
          $t('message.cadViewer.taggingMode.changeMarkupTip')}}
        </div>
        <div>{{dialogExitFileName}}</div>
      </div>
      <div slot="footer" class="dialog-footer" @before-close="onTextInputDialogOkClick(false)">
        <el-button @click="onMarkupModeExit(false)">{{$t('message.public.cancel')}}</el-button>
        <el-button type="primary" @click="onMarkupModeExit(true)">{{$t('message.public.confirm')}}</el-button>
      </div>
    </el-dialog>

    <div class="toolbar">
      <div class="t-content">
        <div class="l-menu" v-if="true">
          <i class="el-icon-s-home" @click="onBackToHome"></i>
          <!-- 一级下拉菜单 -->
          <div v-for="(item, index) in t_l_menu" :key="index">
            <Dropdown
              v-if="item.dropdownList.length!=0"
              :disabled="item.disable"
              trigger="click"
              @on-click="removeActiveClass"
            >
              <span
                @click="activeMenuClick(item,index)"
                :class="activeClass == index ? 'activeSpanBackground' : ''"
              >{{item.title}}</span>
              <DropdownMenu slot="list">
                <!-- 二级下拉菜单 -->
                <div v-for="element in item.dropdownList" :key="element.title">
                  <Dropdown
                    placement="right-start"
                    v-if="element.dropdownList&&element.dropdownList.length!=0"
                    @on-click="removeActiveClass"
                  >
                    <Dropdown-item :divided="element.divided" :name="element.title">
                      {{element.title}}
                      <i class="el-icon-caret-right"></i>
                    </Dropdown-item>
                    <Dropdown-menu slot="list">
                      <Dropdown-item
                        v-for="Item in element.dropdownList"
                        :key="Item.title"
                        :name="Item.title"
                      >
                        <pre>{{Item.title}}</pre>
                      </Dropdown-item>
                    </Dropdown-menu>
                  </Dropdown>
                  <!-- 无二级下拉菜单 -->
                  <DropdownItem
                    v-else
                    :divided="element.divided"
                    :name="element.title"
                  >{{element.title}}</DropdownItem>
                </div>
              </DropdownMenu>
            </Dropdown>
            <!-- 一级下拉无菜单用此标签 -->
            <span
              @click="activeMenuClick(item,index)"
              :class="activeClass == index ? 'activeSpanBackground' : ''"
              v-else
            >{{item.title}}</span>
          </div>
        </div>
        <span class="file-name" @click="(loadMarkupFile)">{{fileName}}</span>
      </div>
      <selectShapeParams
        ref="paramslayout"
        class="params-layout"
        :isAble="isMarkupEnable"
        @handleSelectChange="onParamsSelectChange"
        @handlePrintClick="printSVGViewer"
        @handleResetViewClick="resetSVGViewer"
        @handleDownLoadClick="downLoadFile"
        :selectedShapeParam="selectedParams"
      />
    </div>
    <div class="content-view">
      <!-- 左侧菜单 -->
      <addShapesLayout
        ref="shapeslayout"
        class="shapes-layout"
        :isAble="isMarkupEnable"
        @handleSelectChange="onShapeSelectChange"
      />

      <!-- cad图纸 -->
      <div id="right-CAD" class="right-CAD"></div>
      <!-- 底栏内容 -->
      <div class="bottom-content">
        <div class="l">
          <span>Ready</span>
          <span>{{fileName}}</span>
        </div>
        <div class="X">
          <span>X: {{mousePosX.toFixed(3)}}</span>
        </div>
        <div class="Y">
          <span>Y: {{mousePosY.toFixed(3)}}</span>
        </div>
        <div class="file-Date" @click="onExportClick">
          <span style="marginLeft:16px">File Date:</span>
          <span>{{fileDate}}</span>
        </div>
      </div>
    </div>

    <!-- 进入标记模式 -->
    <taggingMode
      ref="taggingMode"
      v-if="showEnterMarkupDialog"
      @onNewFileClick="onSelectedMarkupFileCreate"
      @onOkClick="onSelectedMarkupFileOk"
      @onCancelClick="onSelectedMarkupFileCancel"
      :inFileID="this.$route.query.id"
    ></taggingMode>

    <!-- 另存为弹窗 -->
    <saveAsFile
      v-if="showCreateNewFileDialog"
      :showMode="showCreateNewFileType"
      :markupFileData="markupFileData"
      :markupFileBaseData="markupFileBaseData"
      @onOkClick="onCreateNewFileOk"
      @onCancelClick="onCreateNewFileCancel"
    ></saveAsFile>
  </div>
</template>

<script>
import selectShapeParams from "@/components/CadView/selectShapeParams";
import addShapesLayout from "@/components/CadView/addShapesLayout";

import * as svg_opt from "@/utils/svg_opt.js";

import { getFile } from "@/api/api";
import { Loading } from "element-ui";
import { editMarkUpFileContent, createMarkUpFileByContent } from "../api/api";

//弹框
import saveAsFile from "@/components/CadView/saveAsFileDialog";
import taggingMode from "@/components/CadView/taggingMode";
// 导出模块
export default {
  // 模块名字
  name: "CadView",
  // 模块数据
  data() {
    //数据
    return {
      // require("@/assets/model/136-001A.svg")
      svgSourceUrl: "",
      t_l_menu: [
        //
        {
          title: this.$t("message.cadViewer.tl_menu.file"),
          dropdownList: [
            {
              title: this.$t("message.cadViewer.tl_menu_file.open"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_file.save"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_file.save_as"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_file.sign_file"),
              type: "",
              divided: true,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_file.printing"),
              type: "",
              divided: true,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_file.print_preview"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_file.print_set"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_file.enter_tag_mode"),
              type: "",
              divided: true,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_file.over_tag_mode"),
              type: "",
              divided: false,
            },
          ],
        },
        {
          title: this.$t("message.cadViewer.tl_menu.section"),
          dropdownList: [
            {
              title: this.$t("message.cadViewer.tl_menu_section.select_mode"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.arc"),
              type: "",
              divided: true,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.box"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.circle"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.cloud"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.filled_box"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.freestyle"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.H"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.leader"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.line"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.polyline"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.Y"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_section.text"),
              type: "",
              divided: true,
            },
          ],
        },
        {
          title: this.$t("message.cadViewer.tl_menu.modify"),
          dropdownList: [
            {
              title: this.$t("message.cadViewer.tl_menu_modify._delete"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_modify.line"),
              type: "",
              dropdownList: [
                {
                  title:
                    "- - - - - - - - - - - - - - - - - - - - - - - - - - - -",
                  type: "",
                },
                {
                  title:
                    "- - - -     - - - -     - - - -     - - - -     - - - -",
                  type: "",
                },
                {
                  title:
                    "-   -   -   -   -   -   -   -   -   -   -   -   -   - ",
                  type: "",
                },
                {
                  title:
                    "- - - -     -    - - - -    -- - - -     -    - - - -",
                  type: "",
                },
                {
                  title:
                    "- - - -     -  -    - - - -    -  -    - - - -    -  -",
                  type: "",
                },
              ],
              divided: true,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_modify.line_width"),
              type: "",
              dropdownList: [
                {
                  title: "1 Pixel",
                  type: "",
                },
                {
                  title: "2 Pixel",
                  type: "",
                },
                {
                  title: "3 Pixel",
                  type: "",
                },
                {
                  title: "4 Pixel",
                  type: "",
                },
                {
                  title: "5 Pixel",
                  type: "",
                },
              ],
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_modify.color"),
              type: "",
              dropdownList: [
                {
                  title: this.$t("message.cadViewer.tl_menu_fill.none_fill"),
                  type: "",
                },
                {
                  title: this.$t("message.cadViewer.tl_menu_fill.opaque"),
                  type: "",
                },
                {
                  title: this.$t("message.cadViewer.tl_menu_fill.transparent"),
                  type: "",
                },
              ],
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_modify.fill_type"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_modify.fill_color"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_modify.font"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_modify.markup_img"),
              type: "",
              divided: true,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_modify.markup_hide"),
              type: "",
              divided: true,
            },
          ],
        },
        {
          title: this.$t("message.cadViewer.tl_menu.view"),
          dropdownList: [
            {
              title: this.$t("message.cadViewer.tl_menu_view.enlarge"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_view.narrow"),
              type: "",
              divided: false,
            },
            {
              title: this.$t("message.cadViewer.tl_menu_view.self_adaption"),
              type: "",
              divided: false,
            },
          ],
        },
        {
          title: this.$t("message.cadViewer.tl_menu.tool"),
          dropdownList: [],
        },
        {
          title: this.$t("message.cadViewer.tl_menu.help"),
          dropdownList: [],
        },
        {
          title: this.$t("message.cadViewer.tl_menu.language"),
          dropdownList: [
            {
              title: "中文",
              type: "",
              divided: false,
            },
            {
              title: "日本語",
              type: "",
              divided: false,
            },
          ],
        },
        {
          title: "test_menu",
          dropdownList: [
            {
              title: "打开/新建标记文档",
              type: "",
              divided: false,
              disable: !this.isMarkupEnable,
            },
            {
              title: "保存",
              type: "",
              divided: false,
              disable: this.isMarkupEnable,
            },
            {
              title: "另存",
              type: "",
              divided: false,
              disable: this.isMarkupEnable,
            },
            {
              title: "进入标记模式",
              type: "",
              divided: false,
              disable: this.isMarkupEnable,
            },
            {
              title: "退出标记模式",
              type: "",
              divided: false,
              disable: this.isMarkupEnable,
            },
            {
              title: "标记文件信息",
              type: "",
              divided: false,
              disable: this.isMarkupEnable,
            },
          ],
        },
      ],
      left_iconfont: [
        {
          icon: "\ue6b6",
        },
        {
          icon: "\ue6be",
        },
        {
          icon: "\ue6bd",
        },
        {
          icon: "\ue6bf",
        },
        {
          icon: "\ue6bc",
        },
        {
          icon: "\ue6ba",
        },
        {
          icon: "\ue6b5",
        },
        {
          icon: "\ue6b9",
        },
        {
          icon: "\ue6b8",
        },
        {
          icon: "\ue6b7",
        },
        {
          icon: "\ue6c1",
        },
        {
          icon: "\ue6c0",
        },
      ],
      activeClass: null,

      mousePosX: 0,
      mousePosY: 0,

      selectedBold: false,
      selectedItalics: false,
      selectedUnderline: false,

      selectedShapeId: 0,
      selectedParams: {},
      showTextInputDialog: false,
      showEnterMarkupDialog: false,
      showExitMarkupDialog: false,
      showExitMarkupType: 0, // 0 open other 1 save close
      dialogExitFileName: "fdasfdafds",

      showCreateNewFileDialog: false,
      showCreateNewFileType: 0, // 0 create  1 查看  2 saveas

      textInputDialogContent: "textInputDialogContent",

      dialogFormVisible: false,
      fileName: null,
      fileDate: null,
      fileUrl: null,

      fullscreenLoading: true,
      pageLoading: null,

      // 组件是否可用
      isMarkupEnable: false,
      // isAddShapeAble: true,
      // isChooseParamAble: true,

      //菜单点击标记
      activeClass: null,

      markupFileData: {},
      markupFileBaseData: {},
    };
  },
  // 注册组件
  components: {
    selectShapeParams,
    addShapesLayout,
    saveAsFile,
    taggingMode,
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {
    selectedParams(val) {
      svg_opt.setGParams(val);
    },
  },
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    /**
     * 加载markup xml
     */
    loadMarkupFile(filePath) {
      if (filePath == null) filePath = "/markup_exports.xml";
      let res = svg_opt.loadMarkupsFromFile(filePath);
      if (!res) {
        this.$message.error("markup文件出错了");
      }
    },

    updateMarkupFileBaseData(baseInfo) {
      debugger;
      this.markupFileBaseData = baseInfo;
    },

    /**
     * 图形参数改变回调
     */
    onParamsSelectChange(e) {
      console.log(e);
      // return;
      this.selectedParams = e;
    },

    /**
     * 图形选择回调
     */
    onShapeSelectChange(e) {
      console.log(e);
      //      return;
      this.selectedShapeId = e.selectedShapeId; // 图形id
      if (e.selectedShapeId == 0) {
        svg_opt.changeGlobalState(0, -1);
        svg_opt.SetSvgMouseMode(0);
      } else {
        svg_opt.SetSvgMouseMode(2);
        svg_opt.changeGlobalState(3, this.selectedShapeId); // add状态
      }
    },

    updateParamOnSelected(e) {
      this.selectedParams = e;
    },

    onTextInputDialogOkClick(e) {
      this.showTextInputDialog = false;
      var _selectedParams = this.$refs.paramslayout.getParamsSelect();
      if (e) _selectedParams.text = this.textInputDialogContent;
      this.selectedParams = _selectedParams;
    },

    toShowTextInputDialog(e) {
      this.showTextInputDialog = true;
      this.textInputDialogContent = e;
    },

    /**
     * 获取选择的图形参数
     */
    getParamsSelect(e) {
      var _selectedParams = this.$refs.paramslayout.getParamsSelect();
      this.selectedParams = _selectedParams;
    },

    onSvgMousePosChange(posX, posY) {
      this.mousePosX = posX;
      this.mousePosY = posY;
    },

    printSVGViewer() {
      // this.$print(this.$refs.right_CAD, {});
    },
    resetSVGViewer() {
      svg_opt.ResetSvgView();
    },

    onBackToHome() {
      this.$router.push("/HomePageView");
    },

    downLoadFile() {
      if (this.fileUrl) window.location.href = this.fileUrl;
    },

    onSvgLoaded() {
      this.showPageLoading(false);
    },

    showPageLoading(val) {
      if (val) {
        this.pageLoading = this.$loading({
          // 声明一个loading对象
          lock: true, // 是否锁屏
          fullscreen: true,
          // text: "正在加载...", // 加载动画的文字
          // spinner: "el-icon-loading", // 引入的loading图标
          background: "rgba(255, 255, 255, 0.3)", // 背景颜色
          customClass: "loading-mask",
        });
      } else {
        if (this.pageLoading) this.pageLoading.close();
      }
    },

    onExportClick() {
      svg_opt.genMarkupsContent(null);
    },
    // 顶部下拉菜单点击事件
    activeMenuClick(element, index) {
      this.activeClass = index;
    },
    removeActiveClass(name) {
      console.log(name);
      this.activeClass = null;
      if (name == "进入标记模式") {
        this.showEnterMarkupDialog = true;
      } else if (name == "退出标记模式") {
        this.showExitMarkupDialog = true;
        this.showExitMarkupType = 1;
        this.dialogExitFileName = this.markupFileData.markUpFileName + ".xml";
      } else if (name == "打开/新建标记文档") {
        this.showExitMarkupDialog = true;
        this.showExitMarkupType = 0;
        this.dialogExitFileName = this.markupFileData.markUpFileName + ".xml";
      } else if (name == "保存") {
        debugger;
        let strContent = svg_opt.genMarkupsContent(this.markupFileBaseData);
        console.log(strContent);
        this.saveChangesOnMarkupFile(this.markupFileData.id, strContent);
      } else if (name == "另存") {
        this.showCreateNewFileDialog = true;
        this.showCreateNewFileType = 2;
      } else if (name == "标记文件信息") {
        this.showCreateNewFileDialog = true;
        this.showCreateNewFileType = 1;
      }
    },

    onSelectedMarkupFileOk(e) {
      this.showEnterMarkupDialog = false;
      console.log("onSelectedMarkupFileOk");
      console.log(e);
      this.markupFileData = e;
      this.loadMarkupFile(e.filePath);
      this.isMarkupEnable = true;
    },

    onSelectedMarkupFileCancel() {
      this.showEnterMarkupDialog = false;
      if(this.showExitMarkupType == 1)
        this.isMarkupEnable = false;
    },

    onSelectedMarkupFileCreate() {
      this.showCreateNewFileType = 0;
      this.showCreateNewFileDialog = true;
    },

    onCreateNewFileOk(e) {
      // this.showCreateNewFileDialog = false;
      // this.markupFileBaseData = e;
      if (!e) {
        this.showCreateNewFileDialog = false;
        return;
      }

      let contentStr = svg_opt.genMarkupsContent(e);

      this.createMarkupFileByContentStr(
        this.$route.query.id,
        e,
        contentStr,
        "xml"
      );
    },

    onCreateNewFileCancel() {
      this.showCreateNewFileDialog = false;
    },

    onMarkupModeExit(e) {
      if (e) {
        let strContent = svg_opt.genMarkupsContent(this.markupFileBaseData);
        this.saveChangesOnMarkupFile(this.markupFileData.id, strContent);
      } else {
        this.showExitMarkupDialog = false;
        if(this.showExitMarkupType == 0) {
            this.showEnterMarkupDialog = true;
        }
      }
    },

    saveChangesOnMarkupFile(xmlId, contentStr) {
      if (xmlId == null || contentStr == null) {
        return;
      }

      let dataJson = {
        markUpFileID: xmlId,
        content: contentStr,
      };
      this.showPageLoading(true);
      editMarkUpFileContent(dataJson).then((res) => {
        console.log(res);
        this.showPageLoading(false);
        if (res.data.code != 0) {
          return;
        }

        if (this.showExitMarkupDialog) {
          if (this.showExitMarkupType == 0) {
            // open other
            this.showEnterMarkupDialog = true;
          } else {
            // 关闭markup模式
            this.isMarkupEnable = false;
            this.onShapeSelectChange({ selectedShapeId: 0 });
            svg_opt.clearAllMarkups();
            this.markupFileData = null;
            this.markupFileBaseData = null;
          }
          this.showExitMarkupDialog = false;
        }
      });
    },

    createMarkupFileByContentStr(fileId, params, contentStr, ext) {
      if (
        fileId == null ||
        contentStr == null ||
        ext == null ||
        params == null
      ) {
        return;
      }

      let dataJson = {
        fileID: fileId,
        content: contentStr,
        fileName: params.value,
        ext: ext,
        creator: params.userName,
      };
      createMarkUpFileByContent(dataJson).then((res) => {
        console.log(res);
        if (res.data.code != 0) {
          return;
        }
        // showCreateNewFileDialog: false,
        // showCreateNewFileType: 0, // 0 create  1 查看  2 saveas  3 select_create
        if (this.showCreateNewFileDialog) {
          if (this.showCreateNewFileType == 0) {
            console.log("select_create");
            this.$refs.taggingMode.getDataList();
          } else {
            this.markupFileData = res.data.data;
            this.loadMarkupFile(this.markupFileData.filePath);
            this.isMarkupEnable = true;
          }
          this.showCreateNewFileDialog = false;
        }
      });
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {
    // this.svgSourceUrl = require("@/assets/model/136-001A.svg");
    // svg_opt.AddSvg(this.svgSourceUrl, "right-CAD", this.onSvgMousePosChange);

    this.getParamsSelect("e");
    let data = {
      fileID: this.$route.query.id,
      userID: "",
      pageIndex: 1,
      pageSize: 10,
    };
    getFile(data).then((res) => {
      if (res.data.code != 0) {
        return;
      }
      this.svgSourceUrl = res.data.data[0].path;
      // this.svgSourceUrl = require("@/assets/model/136-001A.svg");
      this.fileName = res.data.data[0].name + "." + res.data.data[0].ext;
      this.fileDate = res.data.data[0].modifyTime;
      this.fileUrl = res.data.data[0].sourcePath;
      this.fileId = res.data.data[0].sourcePath;

      svg_opt.AddSvg(this.svgSourceUrl, "right-CAD", this.onSvgMousePosChange);
      svg_opt.SetSvgMouseMode(0);
      svg_opt.setSelectCallBack(this.updateParamOnSelected);
      svg_opt.setOpenInputTextCallBack(this.toShowTextInputDialog);
      svg_opt.setLoadCallBack(this.onSvgLoaded);
      svg_opt.setUpdateMarkupBaseInfoCallback(this.updateMarkupFileBaseData);
    });

    this.showPageLoading(true);

    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      console.log("onkeydown");
      console.log(key);
      if (key == 46) {
        svg_opt.tryDeleteMarkup();
      }
    };

    document.onwheel = function (e) {
      console.log("onscroll");
      console.log(e);
    };
  },
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
};
</script>
<style  lang="scss" scoped>
.cadView {
  width: 100%;
  height: 100%;
  .toolbar {
    width: 100%;
    height: 80px;
    background: rgba(245, 245, 245, 1);
    .t-content {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      text-align: center;
      .iconfont,
      .el-icon-s-home {
        font-size: 24px;
        cursor: pointer;
        color: rgba(0, 0, 0);
        margin: 0 8px;
      }
      .l-menu {
        display: flex;
        align-items: center;
        height: 24px;
        span {
          display: inline-block;
          width: 64px;
          height: 24px;
          font-size: 14px;
          line-height: 24px;
          color: rgba(0, 0, 0, 0.85);
          cursor: pointer;
          transition: 0.5s;
        }
        .activeSpanBackground {
          background: #dedede;
        }
        span:focus {
          outline: none;
        }
      }
      .file-name {
        position: absolute;
        left: 50%;
        top: 50%;
        cursor: pointer;
        transform: translate(-50%, -50%);
      }
      .tianchong {
        width: 5px;
        height: 5px;
      }
    }
  }
  .content-view {
    position: relative;
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
    justify-content: flex-start;

    .right-CAD {
      width: calc(100% - 48px);
      height: calc(100% - 40px);
    }
    .bottom-content {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 40px;
      border-top: 1px solid #b4b4b4;
      background: rgba(245, 245, 245, 1);
      .l {
        width: calc(100% - 490px);
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-right: 1px solid rgba(226, 226, 226, 1);
        span {
          font-size: 12px;
          margin: 16px;
        }
      }
      .X {
        width: 140px;
        height: 100%;
        display: flex;
        align-items: center;
        border-right: 1px solid rgba(226, 226, 226, 1);
        span {
          font-size: 12px;
          margin: 16px;
        }
      }
      .Y {
        width: 140px;
        height: 100%;
        display: flex;
        align-items: center;
        border-right: 1px solid rgba(226, 226, 226, 1);
        span {
          font-size: 12px;
          margin: 16px;
        }
      }
      .file-Date {
        width: 210px;
        font-size: 12px;
      }
    }
  }
}
.active {
  background: rgba(220, 220, 220, 1);
  border-radius: 4px;
  border: 1px solid rgba(189, 189, 189, 1);
}
.loading-mask {
  background: #b4b4b4;
}

.ivu-dropdown-item {
  min-width: 260px;
  height: 40px;
  text-align: left;
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
}
.ivu-dropdown-item:hover {
  background: #dedede;
}
.ivu-dropdown-item-divided {
  display: flex;
  align-items: center;
  margin-top: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  border-top: 1px solid #b4b4b4;
}
.ivu-dropdown-item-divided:before {
  display: none;
}
.ivu-dropdown .ivu-select-dropdown {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.24);
  border-radius: 0px 0px 4px 4px;
}
.el-icon-caret-right {
  position: absolute;
  right: 14px;
}
pre {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
